/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="index_class">
		<u-navbar :background="background" back-icon-color="#fff" class="u-flex">
			<view class="u-flex headTablist">
				<span v-for="(item,index) in headTablist" @click="pageScrollTo(item.selector,index)" :key="index"
					class="headTabItem" :class="headTabCurrent===index?'headTabActive':null">
					{{item.name}}
				</span>
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<div slot="right" class="u-m-r-30">
				<u-icon name="zhuanfa" color="#fff" size="48" class="u-m-r-25" @click="makePoster"></u-icon>
				<!-- <u-icon name="more-dot-fill" color="#fff" size="48"></u-icon> -->
			</div>
			<!-- #endif -->
		</u-navbar>
		<view class="details">
			<!-- 商品 详情 -->
			<swiper class="swiper">
				<swiper-item v-for="(item,index) in swiperItems" :key="index"
					@click="$utils.previewImgs(swiperItems,index)">
					<u-image :src="item.img_url" width="100%" height="100%"></u-image>
				</swiper-item>
			</swiper>

			<view class="fight-group" v-if="product.is_activity == 3">
				<view class="fight-group__left">
					<view>{{$t('¥')}}<text class="u-font-xl">{{ product.zs_shop_price }}</text></view>
				</view>
				<view class="fight-group__middle">
					<view class="fight-group__middle--top">{{$t('拼团优惠价')}}</view>
					<view class="fight-group__middle--bottom">{{$t('¥')}}{{ datainfo.goodsinfo.zs_market_price }}</view>
				</view>
				<view v-if="activity_info.assem_type == 1 && activity_info.zhuangtai == 0" class="fight-group__right"
					style="color: #fff;">{{ activity_info.pin_num }}{{$t('人团')}}</view>
				<u-count-down
					v-if="(activity_info.assem_type == 3 && activity_info.zhuangtai == 1) ||(activity_info.assem_type == 2 && activity_info.zhuangtai == 0) || (activity_info.assem_type == 1 && activity_info.zhuangtai == 2)"
					:timestamp="returnRemainTimeout(activity_info.end_time)" :show-border="true" separator="zh"
					separator-color="#FF" bg-color="#FF8300" separator-size="28" font-size="24" color="#FFF"
					border-color="transparent"></u-count-down>
			</view>

			<view class="topPricePanel">
				<view v-if="product.is_activity == 0 || product.is_activity == 1" class="u-p-r-30 u-p-t-20 ">
					<p class="u-flex u-col-center">
						<span class="shop-price"><span style="font-size:20rpx">{{$t('¥')}}</span>{{product.zs_shop_price}}</span>
						<span class="market-price u-m-l-20">{{$t('价格')}}<text
								class="u-m-l-6">'￥'{{product.zs_market_price}}</text>
						</span>
					</p>
				</view>
				<view v-if="product.is_activity == 2" class="u-p-r-30 u-p-t-20 ">
					<p class="u-flex u-col-center">
						<span>{{$t('积分')}}</span><span class="shop-price">{{product.integral}}</span>
						<span>{{$t('个')}}+</span>
						<span class="shop-price"><span style="font-size:20rpx">{{$t('¥')}}</span>{{product.zs_shop_price}}</span>
						<span class="market-price u-m-l-20">{{$t('价格')}}<text
								class="u-m-l-6">{{$t('¥')}}{{product.zs_market_price}}</text></span>
					</p>
				</view>
				<view class="productNameWrap ">
					<p class="u-font-15"> {{product.goods_name}}</p>
					<u-tag :text="$t('自营')" type="warning" size="mini" mode="light" shape="circle"
						v-if="product.leixing == 1" />
					<u-tag :text="$t('秒杀')" type="warning" size="mini" mode="light" shape="circle"
						v-if="product.is_activity == 1" />
					<u-tag :text="$t('积分换购')" type="warning" size="mini" mode="light" shape="circle"
						v-if="product.is_activity == 2" />
					<u-tag :text="$t('拼团')" type="warning" size="mini" mode="light" shape="circle"
						v-if="product.is_activity == 3" />
					<view class="fight-group__right"
						v-if="(activity_info.assem_type == 3 && activity_info.zhuangtai == 1) ||(activity_info.assem_type == 2 && activity_info.zhuangtai == 0) || (activity_info.assem_type == 1 && activity_info.zhuangtai == 2)"
						style="color: #FF5959;">{{ activity_info.pin_num }}{{$t('人团')}}</view>
				</view>

			</view>


			<view class="grace-time-press" v-if="product.is_activity == 1">
				<view class="datatime-left">{{$t('距离结束')}}
					<u-count-down :timestamp="returnRemainTimeout(activity_info.end_time)" :show-border="true"
						separator="zh" separator-color="#FF6262" bg-color="#FF6262" separator-size="28" font-size="24"
						color="#FFF" border-color="transparent"></u-count-down>
				</view>
				<u-line-progress class="progress-right" active-color="#ff3333" inactive-color="#fbb4af" :striped="true"
					:striped-active="true" :show-percent="false" :percent="activity_info.sales_ratio">
					<!-- <slot>已售{{activity_info.sales_ratio}}%</slot> -->
				</u-line-progress>
			</view>

			<view class="order-shop bgCircle">
				<view class="order_list">
					<view class="juan">
						<text class="order_list_left_title">{{$t('发货')}}</text>
						<text class="color" style="padding-left:20rpx;">
							运费12元,满500包邮!
						</text>
					</view>

					<i class="iconfont order_color" style="font-size:26rpx!important;">{{$t('销量')}}: {{product.sale_number}}</i>

				</view>
				<view class="order_list" @click="coupon(1)"
					v-if="couponinfos.is_show === 1 && product.is_activity != 2">
					<view class="juan">
						<text class="order_list_left_title">{{$t('领券')}}</text>
						<text class="color" style="padding-left:20rpx;" v-for="(coupon,coukey) in couponinfos.infos "
							:key="coukey">
							{{$t('满')}}{{coupon.man_price}}{{$t('减')}}{{coupon.dec_price}}
						</text>
					</view>

					<i class="iconfont icon_e60c order_color"></i>

				</view>
				<view class="order_list">
					<view class="juan">
						<text>{{$t('活动商品')}}</text>
						<text style="padding-left:20rpx;flex:1">会员享7折返利; 赠送全额积分;</text>
					</view>
				
				</view>
				<!-- <view class="order_list" @click="coupon(2)" v-if="huodong.is_show === 1 && product.is_activity != 2">
					<view class="juan">
						<text>{{$t('活动商品')}}</text>
						<text style="padding-left:20rpx;flex:1">{{huodong.infos}}</text>
					</view>

					<i class="iconfont icon_e60c order_color"></i>

				</view> -->
				<view class="order_list" @click="coupon(3)" v-if="sertions.is_show === 1">
					<view class="juan">
						<text class="order_list_left_title">{{$t('服务')}}</text>
						<text style="padding-left:20rpx" v-for="(sertionsItem,sertionsKey) in sertions.infos"
							:key="sertionsKey">{{sertionsItem.ser_name}}</text>
					</view>
					<i class="iconfont icon_e60c order_color"></i>
				</view>
				<view class="order_list" @click="buyNow('guige')" v-if="specs.length">
					<view class="juan">
						<text class="order_list_left_title">{{selectText}}</text>
						<text style="padding-left:20rpx;flex:1">{{guige}}</text>
					</view>

					<i class="iconfont icon_e60c order_color"></i>

				</view>

				<popup-layer ref="popupRef" :direction="'top'" @on-close="closePopup">
					<view class="popup-coupon" v-show="PopupIndex==1">
						<view class="popup-title">{{$t('优惠券')}}</view>
						<view class="coupon-list">
							<view class="items" v-for="(conList,conKey) in getcouponlst" :key="conKey">
								<view class="coupon-left">
									<view>￥ <text>{{conList.dec_price}}</text>{{$t('优惠券')}}</view>
									<text>{{$t('满')}}{{conList.man_price}}{{$t('使用')}}</text>
									<text>{{$t('有限期')}}:{{conList.start_time}}-{{conList.end_time}}</text>
								</view>
								<view class="coupon-right">
									<text @click="Receive(conList.id)" v-if="conList.have == 0">{{$t('立即领取')}}</text>
									<text style="background:#999" v-if="conList.have == 1">{{$t('已领取')}}</text>
								</view>
							</view>

						</view>

						<view class="popup-com">
							<button @click="hidePopup">{{$t('确定')}}</button>
						</view>
					</view>

					<view class="popup-coupon" v-show="PopupIndex==2">
						<view class="popup-title">{{$t('促销')}}</view>
						<view class="coupon-list"
							@click="getnav(`/pagesC/goods/huodongDate?shop_id=${product.shop_id}&prom_id=${huodong.prom_id}&goods_id=${goodsId}`)">
							<view class="cuxiao">
								<text class="title">{{$t('促销')}}</text>
								<view class="content">
									<view style="font-size:22rpx">{{huodonginfo.promotion_name}}</view>
									<view style="color:#999;margin-top:10rpx;">{{huodonginfo.time}}</view>
								</view>
								<i class="iconfont icon_e60c"></i>
							</view>
						</view>

						<view class="popup-com">
							<button @click="hidePopup">{{$t('确定')}}</button>
						</view>
					</view>

					<view class="popup-coupon" v-show="PopupIndex==3">
						<view class="popup-title">{{$t('基础保障')}}</view>
						<view class="coupon-list">
							<view class="guarantee" v-for="(serlstList,serlstKey) in serlst" :key="serlstKey">
								<image />
								<view class="guar-cont">
									<view>{{serlstList.ser_name}}</view>
									<view style="color:#999;margin-top:10rpx;">{{serlstList.ser_remark}}</view>
								</view>
							</view>

						</view>

						<view class="popup-com">
							<button @click="hidePopup">{{$t('确定')}}</button>
						</view>
					</view>

					<view class="popup-coupon" v-show="PopupIndex==5">
						<view class="grace-product-attr">
							<form @submit="attrSubmit" class="grace-form">
								<!-- 关闭按钮  -->
								<view class="grace-product-attr-close" @click="closeAttr">
									<text class="grace-iconfont icon-close2"></text>
								</view>
								<!-- 头部商品信息 -->
								<view class="grace-product-attr-info" style="height:240rpx;">
									<image :src="product.thumb_url" style="width:200rpx;height:200rpx"></image>
									<view class="title">
										<div
											style="color:#FF1212;font-size:40rpx;dispaly:inline-block;margin: 0;padding: 0">
											<span v-if="product.is_activity == 0 || product.is_activity == 1">
												￥{{ product.zs_shop_price }}
											</span>
											<span v-if="product.is_activity == 2">
												<span></span> {{product.integral}}{{$t('积分')}}+{{$t('￥')}}{{ product.zs_shop_price }}
											</span>
											<span v-if="product.is_activity == 3 && isPT == 1">
												￥{{ activity_info.dandu_button_price }} 
											</span>
											<span v-if="product.is_activity == 3 && isPT == 2">
												￥{{ product.zs_market_price }} 
											</span>
											<span class="tag-name"
												v-if="product.is_activity == 3 &&(isPT == 2 || isPT == '')">{{$t('拼团')}}</span>

											<text class="activity_info tag-name"
												v-if="product.is_activity == 1">{{$t('秒杀')}}</text>
										</div>

										<div style="font-size:24rpx;line-height:60rpx;">{{$t('库存')}} : {{stock}}{{$t('件')}}</div>
										<view>{{selectText}} {{guige}} </view>
									</view>
								</view>
								<!-- 属性列表区 -->
								<view style="height:calc(100% - 250px); overflow-y:auto;">
									<view class="grace-product-attr-list" v-for="(item,index) in specList" :key="index">
										<view class="title">{{item.title}}</view>
										<view class="grace-select-tips">
											<view name="type" class="select">
												<view class="select-items u-m-8"
													@click="changeSpec(item.title, its.name, its.able, its.id, index)"
													v-for="(its, ins)  in item.list"
													:class="[its.able == false ? 'disable-spec-tiem' : its.check == true ? 'grace-checked-color' : '']">
													<image v-if="its.thumb" class="img" :src="its.thumb" />
													{{its.name}}
												</view>
											</view>
										</view>
									</view>
									<view class="grace-items" style="margin-top:8px;">
										<view class="grace-label">{{$t('购买数量')}}</view>
										<!-- input 用于记录购买数量隐藏形式并参与表单提交 -->

										<uni-number-box v-if="product.is_activity === 1" :value="buyNum" :min="1"
											:max=" activity_info == '' ? 10000: activity_info.xznum"
											v-on:change="buyNumChange"></uni-number-box>
										<uni-number-box v-else :value="buyNum" :min="1" :max="1000000"
											v-on:change="buyNumChange"></uni-number-box>
									</view>
								</view>
								<view class="pt-tip" v-if="isPT == 2 && product.is_activity != 3">
									{{$t('抱歉所选商品规格不能发起拼团，仅支持单独购买')}}
								</view>
								<view class="grace-product-attr-btn" v-if="isPT == '' && product.is_activity != 3">
									<u-button shape="circle" type="warning" @click="submitOrder(false, 1)">确定</u-button>
								</view>
								
								<view class="grace-product-attr-btn" v-if="isPT == 1">
									<button type="warn" @click="submitOrder(false, 1)">{{$t('单独购买')}}</button>
								</view>
								<view v-if="isPT == 2 && product.is_activity != 3"></view>
								<view class="grace-product-attr-btn flex" v-if="isPT == 2">
									<button type="warn" class="flex1" v-if="product.is_activity == 3"
										@click="submitOrder(false, 2)">{{ getBtnText }}</button>

									<button type="warn" @click="submitOrder(true)" class="flex1"
										v-if="product.is_activity != 3">{{$t('加入购物车')}}</button>
									<button type="warn" class="flex1 right-htn" @click="submitOrder(false, 1)"
										v-if="product.is_activity != 3" style="margin-left: 20rpx;">{{$t('立即购买')}}</button>

								</view>
							</form>
						</view>
					</view>
				</popup-layer>

			</view>

			<view class="fight-group__step" style="height: auto" v-if="product.is_activity == 3">
				<view class="fight-group__step--header">
					<view class="middle">{{$t('立即参加Ta人的已开团，可快速成团')}}</view>
					<i class="iconfont icon_e60c"></i>
				</view>
				<view class="fight-group__list" v-for="(item, index) in userList" :key="index">
					<u-avatar :src="item.headimgurl" size="mini"></u-avatar>
					<view class="fight-group__list--middle">
						<h2>{{ item.user_name }}</h2>
						<span>{{$t('还差')}}{{ item.pin_num - item.tuan_num }}{{$t('人')}}</span>
						<u-count-down class="u-m-l-20" :timestamp="returnRemainTimeout(item.timeout)" font-size="28"
							color="#606266" :show-days="false"> </u-count-down>{{$t('后结束')}}
					</view>
					<view class="fight-group__list--item" @click="assembleActivityStatus(item.id)">{{$t('拼团')}}</view>
				</view>
			</view>
			<!-- 拼团 -->
			<view class="fight-group__step" v-if="product.is_activity == 3">
				<view class="fight-group__step--header" @click="getnav('/pagesC/goods/assembleRule')">
					<view class="middle">{{$t('查看拼团规则')}}</view>
					<i class="iconfont icon_e60c"></i>
				</view>
				<!-- <view class="fight-group__step--middle">
					<image :class="[item.pin_type == 1 ? 'user-active' : '']" :src="item.headimgurl"
						v-for="(item, index) in avatarList.imgs" :key="index"></image>
					<view>{{ avatarList.title }}</view>
				</view> -->
				<view class="fight-group__step--list">
					<view class="fight-group__step--item step-item__active">
						<image src="../../static/images/img/fight-group.png" />
						<text>{{$t('发起拼团')}}</text>
					</view>
					<view class="fight-group__step--item"
						:class="[activity_info.zhuangtai > 0 ? 'step-item__active' : '']">
						<image
							:src="activity_info.zhuangtai > 0 ? '../../static/images/img/fight-group.png' : '../../static/images/img/fight-group-disable.png'" />
						<text>{{$t('邀请好友参团')}}</text>
					</view>
					<view class="fight-group__step--item"
						:class="[activity_info.zhuangtai == 2 ? 'step-item__active' : '']">
						<image
							:src="activity_info.zhuangtai == 2 ? '../../static/images/img/fight-group.png' : '../../static/images/img/fight-group-disable.png'" />
						<text>{{$t('拼团成功')}}</text>
					</view>
				</view>
			</view>



			<!-- 进店 -->
			<!-- <view class="enterShop">
				<i class="iconfont icon_e678"></i>
				<view class="entershop-wrap"
					@click="$u.route({url:'/pagesC/shop/storeDetails',params:{shop_id:shopinfos.id}})">
					<u-avatar class="u-m-r-15" :src="shopinfos.logo" show-level></u-avatar>
					<view class="entershop-middle u-m-l-20">
						<view class="u-font-lg  u-m-b-10 entershop-middle-name">{{shopinfos.shop_name}}</view>
						<text class="u-font-sm" :style="{color:$u.color['tipsColor']}">{{shopinfos.shop_desc}}</text>
					</view>
					<u-icon name="arrow-right" color="#999" size="28"></u-icon>
				</view>
				<view class="u-flex">
					
						<view v-for="goods in shopinfos.goods_list" :key="goods.id"
							class="shopInfoRecommend u-flex u-row-center"
							@click="$u.route({url:'/pagesC/goods/goodsDetails',params:{id:goods.id}})">
							<u-image class="u-m-b-10" :src="goods.thumb_url" width="160rpx" height="160rpx"
								border-radius="12" mode="widthFix" />
							<text class="u-line-1 u-font-sm">{{goods.goods_name.slice(0,6)+'..'}}</text>
						</view>
					

				</view>
				<div class="u-flex u-row-center  u-m-t-25">
					<u-tag :text="$t('联系客服')" shape="circle" class="u-m-r-30" @click="chat" type="info" />

				</div>

			</view> -->
			<!-- 评论 -->
			<!-- <view class="grace-product-info">
				<view class="u-flex u-col-center u-row-between u-m-b-20"
					@click="$u.route({url:'/pagesC/goodsComment/index',params:{id:goodsId}})">
					<h2 class="u-item-title comment-title">
						<view class="u-item-title-left"></view>
						{{$t('评价')}} <span class="comment-count">{{commentTotal+'+'}}</span></h2>
					<u-icon name="arrow-right" color="#999" size="24"></u-icon>
				</view>
				<block v-for="item in GoodsCommentList" :key="item.id">
					<div class="commetItem">
						<div class="head ">
							<div class=" leftWrap">
								<image class="avatar" :src="item.headimgurl" mode="aspectFill"> </image>
								<div>
									<p>{{item.user_name?item.user_name:$t('匿名')}}</p>
									<u-rate :value="item.goods_star" active-color="#ffa468" disabled></u-rate>
								</div>
							</div>
							<span class="time">{{item.createtime.slice(0,10) }}</span>
						</div>

						<div class="star">

						</div>
						<p class="content">{{item.content}}</p>
						<div class="imgWrap">
							<block v-for="(img, index2) in item.imgurl" :key="index2">
								<u-image :src="img" mode="widthFix" @click="$utils.previewImgs(item.imgurl,index2)"
									width="240" height="240" border-radius="8"> </u-image>
							</block>
						</div>
					</div>
				</block>

				<u-empty :text="$t('暂无评论')" :src="getNocommentSrc" icon-size="280" v-if="GoodsCommentList.length===0">
				</u-empty>
			</view> -->

			<view class="grace-product-info goodsDetailsImgs">
				<view class="u-flex u-col-center u-row-between u-m-b-20" >
					<h2 class="u-item-title"><view class="u-item-title-left"></view>{{$t('详情')}}</h2>
				</view>
				<u-table v-if="datainfo.goods_param !=''" class="param-table" align="left" padding="10rpx 20rpx">
					<u-tr>
						<u-td class="param-title">{{$t('参数')}}</u-td>
					</u-tr>
					<u-tr v-for="(item,index) in datainfo.goods_param">
						<u-td width="30%">{{item.title}}</u-td>
						<u-td width="70%">{{item.value}}</u-td>
					</u-tr>
				</u-table>
				<u-parse :html="product.goods_desc"></u-parse>
			</view>



			<view style="height:60px;"></view>
			<!-- 底部 -->
			<view class="u-flex u-row-between footerWrap u-p-15">
				<view style="width:30%;" class="u-flex u-row-between u-p-l-15 u-p-r-15">

					<u-icon @click="getTab('/pages/tabBar/home')" name="home" color="#333" size="40" :label="$t('首页')" label-pos="bottom"
						label-size="24"></u-icon>
					<!-- <u-icon  @click="makePoster" name="share"
						color="#333" size="40" :label="$t('海报')" label-pos="bottom" label-size="24"></u-icon> -->
					<u-icon @click="getTab('/pages/tabBar/cart')" name="shopping-cart" color="#333" size="40"
						:label="$t('购物车')" label-pos="bottom" label-size="24"></u-icon>
				</view>
				<!-- 正常显示 没有活动 -->
				<div class="u-flex " v-if="product.is_activity != 3">
					<view class="productBuyBtn leftBtn" @click="buyNow(true, '')" v-if="product.is_activity != 2">{{$t('加入购物车')}}
					</view>
					<view class="productBuyBtn rightBtn" v-if="product.is_activity != 2" @click="buyNow(false, '')">{{$t('立即购买')}}
					</view>
					<view class="productBuyBtn integralBtn" v-if="product.is_activity == 2" @click="buyNow(false, '')">
						{{$t('立即兑换')}}</view>
				</div>
				<!--  有活动-->
				<view class="u-flex" v-if="product.is_activity == 3">

					<view class="singleBuyBtn" @click="buyNow(false, 1)">
						<view class="u-font-bold">{{$t('单独购买')}}</view>
						<text>¥{{ activity_info.dandu_button_price }}</text>
					</view>
					<view class="teamBuyBtn" :class="[getBtnText === $t('邀请好友') ? 'right-htn__active' : '' ]"
						@click="buyNow(false, 2)">
						<view class="u-font-bold">{{ getBtnText }}</view>
						<text v-if="getBtnText != $t('邀请好友')">¥{{ activity_info.pintuan_button_price }}</text>
					</view>
				</view>

			</view>

		</view>

		<view class="rightMenu" v-if="isMPWixin">
			<button class="weshareBtn" open-type="share">
				<u-icon class="rightMenuicon" name="weixin-fill" color="#3BB133" size="48"></u-icon>
			</button>
		</view>
		<view class="skeleton" v-if="skeleton == 'show'">
			<image :src="imgSTATICURL+'images/skeleton-img.png'"></image>
		</view>

		<u-popup v-model="isJoinBuyTeam" v-if="joinAGroup.tz" mode="center" border-radius="14" width="80%"
			:closeable="true">
			<view class="buyTeamWrap">
				<p class="title">{{$t('参与')}} {{joinAGroup.tz.user_name}}{{$t('的拼单')}}</p>
				<p class="remainder">{{$t('仅剩')}}{{joinAGroup.pin_num-joinAGroup.tuan_num}}{{$t('个名额')}}，
					<u-count-down :timestamp="returnRemainTimeout(joinAGroup.timeout)" :show-border="true"
						font-size="28" color="#606266" border-color="transparent"></u-count-down>{{$t('后结束')}}
				</p>
				<u-avatar :src="joinAGroup.tz.headimgurl"></u-avatar>
				<u-button type="error" style="margin-top:20rpx" @click="joinGroup(joinAGroup.assem_number)"> {{$t('拼团')}}
				</u-button>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
		<shareMask ref="shareMask" @onCloseMask="onCloseMask" />
		<view class="hideCanvasView">
			<canvas class="hideCanvas" id="default_PosterCanvasId" canvas-id="default_PosterCanvasId"
				:style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"></canvas>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from '../../components/uni-number-box.vue'
	import goodsCard from '@/components/goodsCard'
	import shareMask from '@/components/shareMask'
	import _app from './js_sdk/QuShe-SharerPoster/QS-SharePoster/app.js';
	import {
		getSharePoster
	} from './js_sdk/QuShe-SharerPoster/QS-SharePoster/QS-SharePoster.js';
	let pinid, canvasImg = '';
	let shopId = null // 商品 id
	let arr = []
	let buyNowNum = ''
	//记录用户选择的属性
	let strRadio = []
	var dateObj = new Date();

	export default {
		components: {
			uniNumberBox,
			goodsCard,
			shareMask
		},
		data() {
			return {
				imgSTATICURL: this.STATICURL,
				heightImg: '330px',
				datainfo: {
					goods_param: [],
					share_url: ''
				},
				isJoinBuyTeam: false,
				swiperItems: [], // 轮播图
				product: '', // 商品详情
				goodsThumb: '',
				shopinfos: '', // 商家店铺
				guige: '',
				couponinfos: '', // 商品优惠券
				huodong: '', // 活动
				sertions: '', // 服务
				specs: [], // 商品属性
				getcouponlst: [], //优惠券列表
				huodonginfo: '', // 活动促销列表
				serlst: [], // 商品服务列表
				goodsId: null, // 商品 id
				activity_info: '', // 限时秒杀
				active: 1,
				stock: 0, //  获取库存信息
				buyNum: 1,
				activity_time: {}, // 秒杀时间
				pin_id: '',
				tuan_id: '',
				PopupIndex: 0,
				userList: [],
				userCartNum: 0,
				choosePinNum: '',
				isPT: '',
				isJoin: false,
				skeleton: 'show',
				isMPWixin: false,
				valueStatus: 0, // 更新页面状态 防止页面卡死
				GoodsCommentList: [],
				currentIndex: 0,
				tmeImg: '',
				swiperIndex: 0,
				joinAGroup: {},
				selectText: '',
				specList: [],
				skuList: [],
				selectSpec: {}, // 选择数据的对象 将已选的数据放在这个对象里面记录下来
				commentTotal: 0,
				background: {
					backgroundColor: '#f43530',
					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				headTablist: [{
						name: this.$t('商品'),
						selector: '.swiper',
					},
					{
						name: this.$t('详情'),
						selector: '.goodsDetailsImgs',
					}
				],
				headTabCurrent: 0,
				scrollTop: 0,
				isReady: false,
				poster: {},
				posterImage: '',
				canvasId: 'default_PosterCanvasId',
				source:'',//页面来源
				vip:0,
			};
		},

		async onLoad(option) {
			
			// var id = Math.random().toString(16).substr(2);
			// var canvasId = 'myCanvasId_' + id;
			// this.canvasId = canvasId;
			//#ifdef MP-WEIXIN
			this.isMPWixin = true;
			//#endif
			if (option) {
				console.log( uni.getStorageSync("userInfo"));
				if(uni.getStorageSync("userInfo")){
					const userInfo = JSON.parse(uni.getStorageSync("userInfo"));
					this.vip = userInfo.vip
				}
				pinid = option.pin_id || ''
				if (pinid) {
					this.assembleActivityStatus(pinid)
				}
				shopId = option.id
				this.goodsId = option.id
				this.userCartNum = this.$store.state.userCartNum
				await this.getGoodsInfo()
				this.getGoodsCommentList()
				strRadio = []
				
				if(typeof(option.source) != 'undefined' && option.source == 'assemble'){
					this.source = option.source;
				}
				
				if(option.shareUserId){
					this.$store.commit('setshareUserId', option.shareUserId)
				}
			}
			
		},
		
		onBackPress() {
			if(this.source == 'assemble'){
				uni.switchTab({
					url:"/pages/tabBar/home"
				})
				return true;
			}
		},

		computed: {

			getNocommentSrc() {

				return this.STATICURL + 'images/nullStatus/icon-comments.png'
			},
			avatarList() {
				if (this.activity_info.assem_type == 1) {
					if (this.activity_info.zhuangtai === 2) {
						return {
							imgs: this.activity_info.member_assem,
							title: this.$t('拼团成功')
						}
					}

					return {
						imgs: this.activity_info.member_assem,
						title: this.$t('开团后邀请好友组团')
					}
				}

				if (this.activity_info.assem_type == 2) {
					return {
						imgs: this.activity_info.member_assem,
						title: this.activity_info.member_assem[0].pin_type == 1 ?
							`${this.$t('欢迎来到')}${this.activity_info.member_assem[0].user_name}${this.$t('开的团')}` : this.$t('欢迎参团')
					}
				}

				if (this.activity_info.assem_type == 3) {
					return {
						imgs: this.activity_info.member_assem,
						title:  this.$t('邀请好友参团')
					}
				}
			},
			getBtnText() {
				if (this.activity_info.assem_type == 1 && !this.isJoin) {
					return this.$t('发起拼团')
				}

				if (this.activity_info.assem_type == 2 || this.isJoin) {
					return this.$t('立即参团')
				}

				if (this.activity_info.assem_type == 3 && !this.isJoin) {
					return this.$t('邀请好友参团')
				}
			},
			getPrice() {
				if (this.isPT == 2 || this.isPT == '' || this.fangshi == 1) {
					return `${this.$t('￥')}${this.product.zs_shop_price}`
				}
				if (this.isPT == 1) {
					return `${this.$t('￥')}${this.activity_info.dandu_button_price}`
				}
			}
		},

		watch: {

		},

		onShareAppMessage(res) {
			// await this.compositeImage()
			if (res.from === 'button') { // 来自页面内分享按钮
			}

			return {
				title: this.product.goods_name,
				path: '/pagesC/goods/goodsDetails?id=' + shopId+'&shareUserId='+ this.$store.state.userId,
				imageUrl: this.product.thumb_url
			}

		},
		onShareTimeline(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.product.goods_name,
				path: '/pagesC/goods/goodsDetails?id=' + shopId+'&shareUserId='+ this.$store.state.userId,
				imageUrl: this.product.thumb_url
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			qrCode() {
				return new Promise((resolve, reject) => {
					this.$refs.uQRCode.toTempFilePath({
						success: res => {
							resolve(res.tempFilePath)
						}
					})
				})
			},
			makePoster(){
				this.openPoster()
				let os = uni.getSystemInfoSync().platform;
				if(os == 'ios'){ // ios存在兼容问题，需要调用两次openPoster()
					setTimeout(() => {
						this.openPoster()
					}, 600); // 延时需要大于drawDelayTime
				}
			},
			async openPoster() {
				
				try {
					const {
						img_url: mainImg = ''
					} = this.swiperItems[0] || {}
					const {
						zs_shop_price = '', goods_name = ''
					} = this.product
					// _app.showLoading('海报生成中...')
					const d = await getSharePoster({
						_this: this, //若在组件中使用 必传
						type: 'ShareType',
						formData: {
							//访问接口获取背景图携带自定义数据
						},
						posterCanvasId: this.canvasId, //canvasId
						delayTimeScale: 20, //延时系数
						drawDelayTime: 500,
						background: {
							width: 1080,
							height: 1620,
							backgroundColor: '#FFF'
						},
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.045;
							const lineHeight = bgObj.height * 0.04;
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
								rs([{
										type: 'custom',
										setDraw(Context) {
											Context.setGlobalAlpha(1);
										}
									},
									{
										type: 'image',
										url: mainImg,
										alpha: 1,
										dx: 0,
										dy: fontSize + 70,
										// mode: 'aspectFit',
										infoCallBack(imageInfo) {
											let scale = bgObj.width * 0.2 / imageInfo
												.height;
											return {
												dWidth: bgObj.width, // 因为设置了圆形图片 所以要乘以2
												dHeight: bgObj.width,
											}
										}
									},
									{
										type: 'text',
										text: '🍃 '+this.$t('推荐一个好物给你，请查收')+' 🍃',
										size: fontSize,
										color: '#666',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: (bgObj.width - textLength) / 2,
												dy: 60
											}
										}
									},
									{
										type: 'text',
										text: goods_name,
										size: fontSize,
										color: '#333',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										lineFeed: {
											maxWidth: bgObj.width * 0.6,
											lineHeight: fontSize + 10,
											lineNum: 3
										},
										infoCallBack(textLength) {
											return {
												dx: bgObj.width * 0.3,
												dy: bgObj.width + fontSize + 170
											}
										},
										serialNum: 0,
										id: 'tag1' //自定义标识
									},
									{
										type: 'text',
										fontStyle: 'italic',
										text: this.$t('￥') + zs_shop_price,
										size: fontSize,
										color: '#FE5000',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										serialNum: 1,
										allInfoCallback({ //v3.0.1 更新 可以获取drawArray中全部数据
											drawArray
										} = {}) {
											const obj = drawArray.find(item => item.id ===
												'tag1');
											/* return {
												dx: obj.dx,
												dy: obj.dy + lineHeight
											} */
											//也可以return promise对象
											return new Promise((rs, rj) => {
												setTimeout(() => {
													rs({
														dx: obj.dx,
														dy: obj
															.dy +
															fontSize +
															150
													});
												}, 1);
											});
										}
									},
									{
										type: 'text',
										text: this.$t('扫码查看详情'),
										size: fontSize * 0.6,
										color: '#333',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: 70,
												dy: bgObj.width + fontSize + 170 + bgObj
													.width * 0.2
											}
										}
									},
									{
										type: 'qrcode',
										text: this.datainfo.share_url,
										size: bgObj.width * 0.2,
										dx: bgObj.width * 0.05,
										dy: bgObj.width + fontSize + 140
									}
								]);
							})
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => { // 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});
					console.log(d.poster.tempFilePath);
					_app.log(this.$t('海报生成成功, 时间')+':' + new Date() + '， '+this.$t('临时路径')+': ' + d.poster.tempFilePath)
					this.posterImage = d.poster.tempFilePath;
					this.$refs.shareMask.shareImg = d.poster.tempFilePath
					this.$refs.shareMask.shareLink = this.datainfo.share_url
					this.$refs.shareMask.shareModel = true
				} catch (e) {
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
					console.log(JSON.stringify(e));
				}
			},

			onCloseMask() {
				this.isReady = false
			},
			pageScrollTo(selector, index) {
				this.headTabCurrent = index
				this.$u.getRect(selector).then(res => {
					uni.pageScrollTo({
						scrollTop: this.scrollTop + res.top - 110,
						duration: 200
					})
				})
			},
			swiperChange(e) {
				this.swiperIndex = e
			},
			preview(urls, index) {
				uni.previewImage({
					urls: urls,
					current: index,
					indicator: 'number'
				});
			},
			returnRemainTimeout(item) {
				return item - new Date().getTime() / 1000
			},
			assembleActivityStatus(id) {
				this.$http.assembleActivityStatus({
					pindan_id: id
				}).then(res => {
					this.joinAGroup = res.data
					if (res.status === 200) {
						this.isJoinBuyTeam = true
					} else {
						this.$refs.uToast.show({
							title: `${ this.joinAGroup.tz.user_name}${this.$t('发起的拼团已结束')}`,
							type: 'error',
							duration: 3500
						})
					}
				})
			},
			getNetworkImage() {
				let url = this.product.thumb_url
				console.log("-> url", url);
				return new Promise((resolve, reject) => {
					uni.downloadFile({
						url,
						success: (e) => {
							const p = e.tempFilePath
							if (p.indexOf('json') > -1) {
								reject(p)
								return false
							}
							resolve(p)
						},
						fail: (r) => {
							reject(r)
						}
					})
				})
			},


			getGoodsCommentList() {
				const data = {
					goods_id: this.goodsId
				}
				this.$http.getGoodsCommentList(data).then(res => {
					if (res.status === 200) {
						const {
							data,
							total
						} = res.data
						this.commentTotal = total
						this.GoodsCommentList = data
					}
				})
			},
			closePopup() {
				this.isJoin = false
			},
			joinGroup(num) {
				this.isJoinBuyTeam = false
				this.isJoin = true
				this.PopupIndex = 5
				this.isPT = 2
				this.choosePinNum = num
				this.$refs.popupRef.show()
			},
			hidePopup() {
				this.isJoin = false
				this.$refs.popupRef.close() // 关闭

			},
			// 1 优惠劵  2 活动 3 服务
			async coupon(index) {

				this.PopupIndex = index
				this.$refs.popupRef.show() // 弹出
				if (this.PopupIndex === 1) {
					this.$loading()
					this.$http.getcouponlst({
						shop_id: this.product.shop_id
					}).then(res => {
						if (res.status == 200) {
							this.getcouponlst = res.data.data
						}
					})
				}
				if (this.PopupIndex === 2) {
					this.$loading()
					this.$http.gethuodonginfo({
						shop_id: this.product.shop_id,
						goods_id: shopId,
						prom_id: this.huodong.prom_id
					}).then(res => {
						if (res.status == 200) {
							this.huodonginfo = res.data
						}
					})
				}
				if (this.PopupIndex === 3) {
					this.$loading()
					this.$http.getserlst({
						shop_id: this.product.shop_id,
						goods_id: shopId
					}).then(res => {
						if (res.status == 200) {
							this.serlst = res.data
						}
					})
				}

			},
			/**
			 * 立即领取优惠劵
			 */
			Receive(id) {
				let isLogin = this.getIsLogin() // 判断是否登录
				if (!isLogin) {
					return false
				} // 判断是否登录
				this.$loading()
				this.$http.getcoupons({
					coupon_id: id,
					shop_id: this.product.shop_id
				}).then(res => {
					if (res.status == 200) {
						this.$toast(res.mess)
						this.getcouponlst.forEach(element => {
							if (element.id == id) {
								element.have = 1
							}
						});
					}
				})
			},
			getGoodsInfo() {
				this.$loading()
				this.$http.getGoodsInfo({
					goods_id: this.goodsId,
				}).then(res => {
					if (res.status == 200) {
						this.datainfo = res.data
						this.swiperItems = res.data.gpres
						this.product = res.data.goodsinfo
						this.goodsThumb = res.data.goodsinfo.thumb_url
						this.shopinfos = res.data.shopinfos
						this.couponinfos = res.data.couponinfos
						this.huodong = res.data.huodong
						this.sertions = res.data.sertions
						this.specs = res.data.specs
						this.originSpecList = res.data.formatSpecList
						this.specList = res.data.formatSpecList
						this.skuList = res.data.formatSkuList
						this.stock = res.data.pronum
						this.pin_id = res.data.pin_id
						this.tuan_id = res.data.tuan_id
						this.userList = res.data.memberpinres

						if (this.specList.length > 0) {
							// 初始化选择数据的对象
							this.specList.forEach(item => {
								this.$set(this.selectSpec, item.title, "");
							})
							// 将规格数据处理成我们视图所需要的数据类型 
							this.specList = this.specList.map(item => {
								return {
									title: item.title,
									list: item.list.map(its => {
										return {
											id: its.id,
											name: its.title,
											thumb: its.thumb,
											// 判断是否可以选择
											able: this.isAble(item.title, its
												.title
											) // 注释的调试看逻辑代码 false 
										}
									})
								}
							})
						}


						if (res.data.goodsinfo.hasoption == 1) {
							this.selectText = this.$t('请选择');
						} else {
							this.selectText = '';
						}

						if (res.data.activity_info.length != 0) {
							this.activity_info = res.data.activity_info
						}

						let str = ''
						if (res.data.specs) {
							res.data.specs.forEach((i, index) => {
								let connectStr = res.data.specs.length - 1 === index ?
									'' : ';'
								this.guige = this.guige + i.title + connectStr
							})
						}


						/**
						 * 更新页面状态 防止页面卡死
						 */
						setTimeout(() => {
							this.skeleton = 'hide'
						}, 200)
						this.statusMath(this)
					}
					if (res.status == 400) {
						console.log(res)
					}

				})

			},

			// 判断规格是否可以被选择  核心函数 key当前的规格的title   value规格值
			isAble(key, value) {
				// 深拷贝 避免被影响  
				var copySelectSpec = JSON.parse(JSON.stringify(this.selectSpec));
				// 用对象的好处就在这了 直接赋值当前验证项
				copySelectSpec[key] = value;
				// 用数组的 some 方法 效率高 符合条件直接退出循环
				let flag = this.skuList.some(item => {
					// 条件判断 核心逻辑判断
					// console.log(item)
					var i = 0;
					// 这个for in 原理就是循环已经选中的 和 正在当前对比的数据 和 所有的sku对比 只有当前验证的所有项满足sku中的规格或者其他规格为空时 即满足条件 稍微有点复杂 把注释的调试代码打开就调试下就可以看懂了
					for (let k in copySelectSpec) {
						//  console.log(copySelectSpec[k])  // 注释的调试看逻辑代码
						if (copySelectSpec[k] != "" && item.specs.includes(copySelectSpec[k])) {
							// console.log(item)
							i++
						} else if (copySelectSpec[k] == "") {
							i++;
						}
					}
					// 符合下面条件就退出了 不符合会一直循环知道循环结束没有符合的条件就 return false 了 
					// console.log(i) // 注释的调试看逻辑代码
					return i == this.specList.length
				})
				return flag
			},

			changeSpec(key, value, able, spec_item_id, index) {
				if (!able) return
				if (this.selectSpec[key] === value) {
					this.selectSpec[key] = ''
				} else {
					this.selectSpec[key] = value
				}
				console.log(this.selectSpec, key)
				// forEach循环改变原数组 
				this.specList.forEach(item => {
					item.list.forEach(its => {
						its.able = this.isAble(item.title, its.name);
					});
				});


				let radioObject = this.specList
				strRadio = []
				let guigearr = []

				for (var i = 0; i < radioObject[index].list.length; i++) {
					if (radioObject[index].list[i].id == spec_item_id) {
						if (radioObject[index].list[i].thumb) {
							this.product.thumb_url = radioObject[index].list[i].thumb + "?" + Math.random()
						} else {
							this.product.thumb_url = this.product.thumb_url + "?" + Math.random()
						}
						radioObject[index].list[i].check = true;
					} else {
						radioObject[index].list[i].check = false;
					}
				}
				let specLengthArr = [];
				let temp = '';
				let tempStr = '';
				for (var i = 0; i < radioObject.length; i++) {
					specLengthArr.push(radioObject[i].list.length)
					for (var j = 0; j < radioObject[i].list.length; j++) {
						if (radioObject[i].list[j].check && radioObject[i].list[j].check == true) {
							strRadio.push(radioObject[i].list[j].id)
							if (!guigearr.includes(radioObject[i].title + ":" + radioObject[i].list[j]
									.name)) {
								guigearr.push(radioObject[i].title + ":" + radioObject[i].list[j].name)
							}
						}
					}
				}

				if (radioObject.length == strRadio.length) {
					// 将选中的商品规格id重新排序，与后端保持一致
					for (var i = 0; i < specLengthArr.length - 1; i++) {
						if (specLengthArr[i] < specLengthArr[i + 1]) {
							temp = specLengthArr[i]
							specLengthArr[i] = specLengthArr[i + 1]
							specLengthArr[i + 1] = temp
							tempStr = strRadio[i]
							strRadio[i] = strRadio[i + 1]
							strRadio[i + 1] = tempStr
						}
					}

					this.selectText = this.$t('已选')
					this.$http.getGoodsPrice({
						goods_attr: strRadio.join('_'),
						goods_id: shopId,
						fangshi: this.isPT != 1 && this.product.is_activity == 3 ? 2 : 1,
						pin_number: this.choosePinNum
					}).then(res => {
						if (res.status == 200) {
							this.stock = res.data.attrinfos.stock
							this.pin_id = res.data.pin_id
							this.tuan_id = res.data.tuan_id
							this.guige = guigearr.join(';')
							this.isJoin = false
							this.userList = res.data.memberpinres
							if (res.data.activity_info.length != 0) {
								this.activity_info = res.data.activity_info
							}
							this.buyNum = 1
							// if ((res.data.fangshi != 1 && this.isPT != 1) || !this.isPT || this.isPT == 2 &&
							// 	res.data.fangshi == 1) {
							// 	this.product.is_activity = res.data.attrinfos.is_activity
							// }

							this.product.goods_name = res.data.attrinfos.goods_name
							this.product.zs_shop_price = res.data.attrinfos.zs_shop_price
							if(this.isPt = 1){
								this.activity_info.dandu_button_price = res.data.attrinfos.zs_shop_price
							}
							if(this.isPt = 2){
								this.product.zs_market_price = res.data.attrinfos.zs_shop_price
							}
							

						}
					})
				}

			},

			showInfo(index) {
				console.log(index)
				this.currentIndex = index
			},

			buyNow: function(type, status) {
				if(type){
					if(this.product.goods_type == 2){
						this.$toast('该商品类型为预约到店，不可加入购物车,请直接购买')
						return
					}
				}
				if (this.getBtnText === this.$t('邀请好友') && type !== 'guige' && status === 2) {
					// this.getnav(`/pagesC/homeSon/invite?pin_id=${this.pin_id}&tuan_id=${this.tuan_id}`)
					return false
				}
				if (type === 'guige' && this.product.is_activity == 3) return

				// 如果商品有多规格，单独购买、拼团购买时重新获取商品规格库存
				if (this.product.hasoption && (status == 1 || status == 2)) {
					console.log(status)
					let type = ''
					if (status == 1) {
						type = 'normal'
					} else if (status == 2) {
						type = 'assemble'
					}
					this.$http.getSkuList({
						goods_id: this.product.id,
						type: type
					}).then(res => {
						if (res.status == 200) {
							this.skuList = res.data
							
							this.specList = this.originSpecList
							if (this.specList.length > 0) {
								// 初始化选择数据的对象
								this.specList.forEach(item => {
									this.$set(this.selectSpec, item.title, "");
								})
								// 将规格数据处理成我们视图所需要的数据类型 
								this.specList = this.specList.map(item => {
									return {
										title: item.title,
										list: item.list.map(its => {
											return {
												id: its.id,
												name: its.title,
												thumb: its.thumb,
												// 判断是否可以选择
												able: this.isAble(item.title,
													its
													.title
												) // 注释的调试看逻辑代码 false 
											}
										})
									}
								})
							}
						}
					})

				}

				this.PopupIndex = 5
				this.isPT = status
				this.$refs.popupRef.show() // 弹出
				buyNowNum = type // true加入购物车，  false直接购买b

			},
			submitOrder(status, type) {
				if (this.getBtnText === this.$t('邀请好友') && type !== 'guige' && type === 2) {
					// this.getnav(`/pagesC/homeSon/invite?pin_id=${this.pin_id}&tuan_id=${this.tuan_id}`)
					return false
				}
				if (buyNowNum) {
					this.attrSubmit(type)
				} else {
					buyNowNum = status
					this.attrSubmit(type)
				}
				this.$refs.popupRef.close() // 弹出
			},
			// 确认属性
			attrSubmit: function(type) {
				let isLogin = this.getIsLogin() // 判断是否登录
				if (!isLogin) {
					return false
				} // 判断是否登录
				//后续操作
				let data = {}
				if (this.getBtnText === this.$t('立即参团')) {
					data = {
						goods_id: shopId,
						goods_attr: strRadio.join('_'),
						num: this.buyNum,
						fangshi: 2,
						pin_number: this.choosePinNum
					}
				} else {
					data = {
						goods_id: shopId,
						goods_attr: strRadio.join('_'),
						num: this.buyNum,
						fangshi: type
					}
				}
				this.$loading()
				if (buyNowNum) {
					this.$http.getaddcart(data).then(res => {
						if (res.status == 200) {
							this.$toast(res.mess)
							//关闭
							this.$store.dispatch('contentnum')
							this.$refs.popupRef.close() // 关闭

							setTimeout(() => {
								this.userCartNum = this.$store.state.userCartNum
							}, 800)
						}
					})
				} else {
					this.$http.getpurbuy(data).then(res => {
						if (res.status == 200) {
							this.getnav(
								`/pagesC/order/confirmOrder?pur_id=${res.data.pur_id}&type=1&fangshi=${res.data.fangshi}&pin_number=${res.data.pin_number}`
							)
						}
					})

				}

			},
			closeAttr: function() {
				this.isJoin = false
				this.$refs.popupRef.close() // 关闭
			},



			buyNumChange: function(data, id) {
				// console.log(data,id)
				this.buyNum = data;
			},
			// 领取优惠券
			securities: function() {
				uni.navigateTo({
					url: '/pages/subPage/Coupon'
				})
			},
			timeuptime() {
				// 倒计时$t('Confirm')或执行
				this.$toast(this.$t(秒杀结束))
				this.getGoodsInfo()
				strRadio = []
			},
			getTab(src) {
				uni.switchTab({
					url: src
				});
			},
			getIsLogin() {
				if (!uni.getStorageSync('token')) {
					// #ifdef MP-WEIXIN
					uni.switchTab({
						url: '/pages/tabBar/my'
					});
					// #endif
					// #ifndef MP-WEIXIN
					uni.redirectTo({
						url: '/pagesB/login/login'
					});
					// #endif
					return false
				}
				return true
			},
			chat() {
				if (!uni.getStorageSync('token')) {
					// #ifdef MP-WEIXIN
					uni.switchTab({
						url: '/pages/tabBar/my'
					});
					// #endif
					// #ifndef MP-WEIXIN
					this.$u.route('/pagesB/login/login')
					// #endif

					return false
				}

				this.$u.route('/pagesB/message/chat',{
					toId : this.datainfo.goodsinfo.shop_token,
					goodsId : this.goodsId
				})
			},
			// 关注
			home() {
				let isLogin = this.getIsLogin() // 判断是否登录
				if (!isLogin) {
					return false
				}
				if (this.product.coll_goods == 1) {
					// 取消关注
					this.$loading()
					this.$http.getcancelcoll({
						goods_id: shopId
					}).then(res => {
						if (res.status == 200) {
							this.$toast(res.mess)
							this.product.coll_goods = 0
						}
					})
				} else {
					this.$loading()
					this.$http.getcoll({
						goods_id: shopId
					}).then(res => {
						if (res.status == 200) {
							this.$toast(res.mess)
							this.product.coll_goods = 1
						}
					})
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import '~uview-ui/index.scss';

	.hideCanvasView {
		height: 0rpx;
		overflow: hidden;
	}

	.swiper {
		height: 740rpx;
	}

	%Card {
		border-radius: 20rpx;
		margin: 20rpx 0;
		background-color: #fff;
		padding: 10rpx 20rpx;
	}

	.topPricePanel {
		@extend %Card;
		$color: #FE5000;

		.shopPrice {
			background-color: $color;
			color: #fff;
			padding: 2rpx 12rpx;
			border-radius: 200rpx;
			margin-left: 20rpx;
		}

		.shop-price {
			font-size: 50rpx;
			color: $color;
		}

		.market-price {
			font-size: 24rpx;
			color: rgb(144, 147, 153);

			text {
				text-decoration: line-through;
			}
		}
	}

	.pt-tip {
		display: block;
		line-height: 60rpx;
		text-align: center;
		padding: 0 0.1rem;
		color: #fff;
		background: #000;
	}

	.select {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.select-items {
		display: flex;
		flex-shrink: 0;
		padding: 4rpx 16rpx;
		background-color: #f4f4f4;
		align-items: center;
		border-radius: 10rpx;
		border: 1rpx solid #f4f4f4;

		.img {
			height: 40rpx;
			width: 40rpx;
			margin-right: 5rpx;
			padding: 5rpx;

		}
	}

	.grace-product-attr-info {
		.title {
			text {
				font-size: 26rpx;
			}
		}

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
		}
	}

	.index_class .grace-footer_assemble .right-htn__active {
		line-height: 90rpx !important;
	}

	.grace-product-attr {
		height: 80vh !important;
		position: absolute !important;
		border-radius: 24rpx 24rpx 0 0;
	}

	.grace-mask {
		position: relative !important;
	}

	.uni-countdown__splitor {
		color: #000;
	}

	.skeleton {
		height: 100vh;
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999999;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.enterShop {
		@extend %Card;
		padding: 20upx 10upx;
	}

	.entershop-wrap {
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 30upx;
		padding-top: 20upx;
	}

	.entershop-wrap>image {
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.entershop-wrap .entershop-middle {
		flex: 1;

		&-name {
			font-weight: 500;
		}
	}

	// 拼团
	.fight-group {
		display: flex;
		align-items: center;
		padding: 16rpx 24rpx;
		height: 87rpx;
		background: #f90cb4;
		color: #fff;
		font-size: 28rpx;
	}

	.fight-group__left {
		margin-right: 20rpx;
		font-size: 30rpx;

		i {
			font-size: 46rpx;
		}
	}

	.fight-group__middle {
		flex: 1;

		.fight-group__middle--top {
			margin-bottom: 6rpx;
			font-size: 24rpx;
		}

		.fight-group__middle--bottom {
			display: inline-block;
			height: 34rpx;
			line-height: 34rpx;
			text-decoration: line-through;
			color: rgba(255, 255, 255, 0.7)
		}
	}

	.fight-group__step {
		// height: 522rpx;
		margin-top: 20rpx;
		padding: 32rpx 0 50rpx 0;
		background: #fff;
		@extend %Card;
	}

	.fight-group__step--header {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		padding: 0 24rpx;
		color: #999;
		font-size: 26rpx;

		.middle {
			flex: 1;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.fight-group__step--middle {
		margin-bottom: 69rpx;
		color: #999999;
		font-size: 28rpx;
		text-align: center;

		image {
			position: relative;
			width: 104rpx;
			height: 104rpx;
			margin-bottom: 24rpx;
			border-radius: 50%;
		}

		.user-active:after {
			display: block;
			position: absolute;
			bottom: 0rpx;
			left: 50%;
			transform: translateX(-50%);
			content: '团长';
			color: #fff;
			padding: 4rpx 2rpx;
			text-align: center;
			background: #FA3F3F;
			font-size: 22rpx;
		}
	}

	.fight-group__step--list {
		display: flex;

		.step-item__active {
			color: #FA3F3F !important;
		}

		.fight-group__step--item {
			flex: 1;
			color: #999999;
			font-size: 24rpx;
			text-align: center;

			&:last-child image::after {
				display: none;
			}

			image {
				position: relative;
				z-index: 1;
				width: 40rpx;
				height: 40rpx;
				overflow: inherit !important;
				margin-bottom: 24rpx;

				&::after {
					position: absolute;
					left: 40rpx;
					top: 50%;
					width: 239rpx;
					height: 2rpx;
					background: #E8E8E8;
					content: '';
					transform: translateY(-50%);
				}
			}

			text {
				display: block;
			}
		}
	}

	.singleBuyBtn {
		background-color: #6e05e5;
		color: #fff;
		border-radius: 8rpx;
		padding: 8rpx 38rpx;
		text-align: center;
	}

	.teamBuyBtn {
		@extend .singleBuyBtn;
		background-color: #f809b4;
	}


	.tag-name {
		display: inline-block;
		font-size: 22rpx;
		border: 1rpx solid #FA3F3F;
		width: 59rpx;
		height: 29rpx;
		line-height: 29rpx;
		margin-left: 10rpx;
		text-align: center;
		border-radius: 4rpx;
		color: #FA3F3F !important;
	}

	.fight-group__list {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;

		.fight-group__list--middle {
			flex: 1;
			padding: 0 10 0 20rpx;
			color: #999;
			font-size: 24rpx;
			margin-left: 20rpx;

			h2 {
				margin-bottom: 10rpx;
				font-size: 30rpx;
				color: #444;
				font-weight: 600;
			}
		}

		image {
			width: 88rpx;
			height: 88rpx;
			margin-right: 20rpx;
			border-radius: 50%;
		}

		.fight-group__list--item {
			font-size: 24rpx;
			color: #fff;
			padding: 10rpx 20rpx;
			display: inline-block;
			text-align: center;
			border-radius: 80rpx;
			background: #ef27b4;
		}
	}

	.commetItem {
		margin-bottom: 20rpx;
		border-bottom: 1px solid #f5f5f5;

		&:last-child {
			margin-bottom: 0;
			border: none;
		}

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.leftWrap {
				display: flex;
				align-items: center;
			}

			.time {
				font-size: 24rpx;
				color: #666;
			}

			.avatar {
				display: flex;
				align-items: center;
				width: 60rpx;
				height: 60rpx;
				border-radius: 200px;
				margin-right: 20rpx;
			}
		}

		.star {
			font-size: 36rpx;
			font-weight: 800;
			color: #ff7f2b;
			margin-left: 15rpx;
			line-height: 1;
			margin-top: 10rpx;
		}

		.content {
			padding: 10rpx;
		}

		.imgWrap {
			display: flex;
			flex-wrap: wrap;

			image {
				width: 24%;
				margin-left: 4rpx;
				border-radius: 12rpx;
			}
		}
	}

	.bgCircle {
		border-radius: 16rpx;
		overflow: hidden;
		background-color: #fff;

	}

	.productNameWrap {
		padding: 12rpx 0;
		@extend .bgCircle
	}

	.goodsPrice {
		font-size: 42rpx;
		font-weight: 600;
	}

	.productBuyBtn {
		text-align: center;
		width: 240rpx;
		padding: 20rpx 0;
		background: #ffcc14;
		color: #fff;
		border-radius: 200px;

		&.leftBtn {
			background-color: #ffcc14;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}

		&.rightBtn {
			border-bottom-left-radius: 0;
			border-top-left-radius: 0;
			background-image: linear-gradient(to right, #ff8864, #ff2121);
		}

		&.integralBtn {
			background-image: linear-gradient(to right, #ff8864, #ff2121);
		}
	}

	.param-table {
		/deep/.param-title {
			font-weight: bold;
		}
	}

	.footerWrap {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		z-index: 999;
	}

	.rightMenu {
		position: fixed;
		bottom: 140rpx;
		right: 20rpx;
		display: flex;
		flex-direction: column;

		.weshareBtn {
			width: 80rpx;
			height: 80rpx;
			background-color: transparent;
			padding: 0;
			margin-bottom: 20rpx;

			&::after {
				border: none;
			}
		}

		&icon {
			width: 70rpx;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(#fff, 0.2);
			border: 2rpx solid #dedede;
			border-radius: 200rpx;
			margin-bottom: 20rpx;
		}
	}


	.order-shop {

		@extend %Card;

		.order_list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.juan {
				display: flex;

				text {
					font-size: 28rpx;
					color: #303133;

					&:nth-child(1) {
						font-weight: 500;
					}

					;

					&:nth-child(2),
					&:nth-child(3) {
						color: #606266;
					}
				}

				.color {
					color: #f44336;
				}
			}

			.order_color {
				font-size: 26rpx;
				color: #333;
			}
		}
	}

	.grace-time-press {
		@extend %Card;
		margin: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.datatime-left {
			font-size: 24rpx;
			color: #FF0036;
			display: flex;
			align-items: center;

			.grace-countdown {
				.grace-countdown-numbers {
					border: 0 !important;
					padding: 0 !important;
					margin: 0 !important;
				}
			}
		}

		.progress-right {
			position: relative;
			width: 230rpx;
			height: 30rpx;
			background: rgba(255, 67, 55, 0.2);
			font-size: 24rpx;
			color: #fff;
			text-align: center;
			line-height: 30rpx;
			border-radius: 15rpx;

			.active-pro {
				position: absolute;
				height: 30rpx;
				left: 0;
				top: 0;
				border-radius: 15rpx;
				background-color: #ff3333;
				opaity: 0.5;
			}
		}
	}

	.buyTeamWrap {
		padding: 38rpx;
		text-align: center;

		.title {
			font-size: 30rpx;
		}

		.remainder {
			color: #666;
			margin: 14rpx 0 28rpx;
		}
	}

	.grace-form {
		.grace-items {
			align-items: center;
		}
	}

	.disable-spec-tiem {
		border: 2rpx dashed #bbb;
	}

	.shopInfoRecommend {
		width: 25%;
		padding: 10upx;
		flex-direction: column;
	}

	.grace-product-info {
		margin-bottom: 6px;
		padding: 20upx 15upx 0;
		
		.u-item-title {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 30upx;
			font-weight: 500;
			
			.u-item-title-left{
				width: 6rpx;
				height: 30rpx;
				margin-right: 20rpx;
				background-image: linear-gradient(to bottom, #fa3f3f, #ffa468);
			}
			
			.comment-count {
				font-weight: 400;
				font-size: 24upx;
				display: inline-block;
				margin-left: 20upx;
				color: #666;
			}
		}
		
		
	}
	

	.headTablist {
		.headTabItem {
			color: #fff;
			padding: 10upx;
			font-size: 32upx;
			font-weight: 500;
			position: relative;
			transition: all 0.3s;

			&.headTabActive {
				font-size: 38upx;
				font-weight: 800;

				&::after {
					content: ' ';
					width: 40upx;
					height: 8upx;
					background-color: #fff;
					position: absolute;
					bottom: 0;
					left: 0;
					transform: translateX(84%);
					border-radius: 100upx;
				}
			}
		}
	}
</style>
